import React from 'react';
import { NavBar, Button } from 'antd-mobile';
import { useNavigate, useLocation } from 'react-router-dom';
import '../styles/paymentSuccess.scss'

const PaymentSuccessPage: React.FC = () => {
    const navigate = useNavigate();
    const location = useLocation();

    // 生成随机订单号
    const generateOrderNumber = () => {
      const date = new Date();
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const random = Math.floor(Math.random() * 10000000).toString().padStart(7, '0');
      return `${year}${month}${day}${random}`;
    }

    // 从location.state获取预约信息
    const { doctor, selectedDate, selectedTime, selectedPatient, feeInfo, orderNumber: passedOrderNumber, visitAddress: passedAddress } = 
      (location.state as any) || 
      {
        doctor: { name: '张医生', title: '主任医师', department: '心内科', hospital: '上海医院' },
        selectedDate: { day: '周四', date: '2022-05-10' },
        selectedTime: '10:00',
        selectedPatient: { name: '张三', age: 35, gender: '男', relation: '本人' },
        feeInfo: { totalFee: 150 },
        passedOrderNumber: null,
        passedAddress: null
      }

    // 就诊地址 - 如果没有传递则使用默认值
    const visitAddress = passedAddress || '上海市静安区普陀路100号';

    // 订单编号 - 如果没有传递则生成新的
    const orderNumber = passedOrderNumber || generateOrderNumber();

    // 处理返回首页按钮点击
    const handleBackToHome = () => {
      navigate('/');
    }

    // 处理查看订单按钮点击
    const handleViewOrder = () => {
      navigate('/my-appointments');
    }

    return (
      <div className="payment-success-page">
        {/* 顶部导航栏 */}
        <NavBar className="nav-bar" onBack={() => navigate('/')}>支付结果</NavBar>

        {/* 支付成功和金额 */}
        <div className="success-card">
          <div className="success-message">支付成功</div>
          <div className="fee-info">
            订单金额：<span className="amount">¥ {feeInfo.totalFee.toFixed(2)}</span>
          </div>
        </div>

        {/* 预约详情 */}
        <div className="order-info-card">
          <div className="order-title">预约详情</div>
          <div className="info-section">
            <div className="doctor-avatar">
              <img src="/images/doctor-avatar.png" alt="医生头像" />
            </div>
            <div className="doctor-info">
              <div className="name-title">{doctor.name} · {doctor.title}</div>
              <div className="dept-hospital">{doctor.department} · {doctor.hospital}</div>
              <div className="visit-time">{selectedDate.date} {selectedDate.day} {selectedTime}</div>
            </div>
          </div>

          <div className="info-item">
            <div className="label">就诊人</div>
            <div className="value">{selectedPatient.name}（{selectedPatient.age}岁，{selectedPatient.gender}）</div>
          </div>

          <div className="info-item">
            <div className="label">就诊地址</div>
            <div className="value">{visitAddress}</div>
          </div>

          <div className="info-item">
            <div className="label">订单号</div>
            <div className="value order-number">{orderNumber}</div>
          </div>
        </div>

        {/* 底部按钮 */}
        <div className="action-buttons">
          <Button className="view-order-btn" onClick={handleViewOrder}>查看订单</Button>
          <Button className="back-home-btn" onClick={handleBackToHome}>返回首页</Button>
        </div>

        {/* 温馨提示 */}
        <div className="tips-section">
          <div className="tips-title">温馨提示</div>
          <div className="tips-content">
            <p>1. 请于就诊当天提前30分钟到达医院</p>
            <p>2. 请保持电话畅通，医生可能会与您联系</p>
            <p>3. 如需取消预约，请至少提前4小时操作</p>
          </div>
        </div>

        <div className="page-footer">支付成功页</div>
      </div>
    )
}

export default PaymentSuccessPage;